// import axios from 'axios';
export const addBaseBlock = (editor) => {
  const opts = {
    // 需要添加的blcoks
    blocks: [
      "column1",
      "column2",
      "column3",
      "column3-7",
      "text",
      "link",
      "image",
    ],
    // 将flexbox用于网格
    flexGrid: true,
    // Class类的前缀
    stylePrefix: "gjs-",
    // 对blocks使用基本CSS
    addBasicStyle: true,
    category: "Basic",
    // 以下为标签名
    labelColumn1: "1 Column",
    labelColumn2: "2 Columns",
    labelColumn3: "3 Columns",
    labelColumn37: "2 Columns 3/7",
    labelText: "Text",
    labelLink: "Link",
    labelImage: "Image",
    labelVideo: "Video",
    labelMap: "Map",
    // 初始行高
    rowHeight: 75,
    // ...opts,
  };

  const bm = editor.BlockManager;

  function rgbToHex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) {
      return rgb;
    }

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }

  const rte = editor.RichTextEditor;

  editor.on("rte:enable", () => {
    const selected = editor.getSelected();
    const rteEl = selected.getEl();

    // 移除旧的事件监听器
    rteEl.removeEventListener("paste", handlePasteEvent);

    // 重新绑定事件监听器
    rteEl.addEventListener("paste", handlePasteEvent);

    function handlePasteEvent(event) {
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡

      const clipboardData = event.clipboardData || window.clipboardData;
      const pastedData =
        clipboardData.getData("text/html") ||
        clipboardData.getData("text/plain");

      // console.log(window.getSelection().rangeCount)
      // 弹出确认框询问用户是否保留原样式
      const keepStyles = confirm("是否保留样式?");

      if (keepStyles) {
        // 保留原样式
        rteEl.innerHTML += pastedData;
      } else {
        // 移除样式，只保留文本
        const text = clipboardData.getData("text/plain");
        rteEl.innerHTML += text;
      }
    }
  });

  // 添加字体大小工具
  rte.add("fontSize", {
    icon: `<select class="gjs-field" style="color: white;">
       <option value="1" style="font-size: 10px;">1</option>
      <option value="2" style="font-size: 13px;">2</option>
      <option value="3" style="font-size: 16px;">3</option>
      <option value="4" style="font-size: 18px;">4</option>
      <option value="5" style="font-size: 24px;">5</option>
      <option value="6" style="font-size: 32px;">6</option>
      <option value="7" style="font-size: 48px;">7</option>
        </select>`,
    event: "change",
    result: (rte, action) => rte.exec("fontSize", action.btn.firstChild.value),
    update: (rte, action) => {
      const value = rte.doc.queryCommandValue(action.name);
      if (value != "false") {
        action.btn.firstChild.value = value;
      }
    },
  });

  // 添加字体颜色工具
  rte.add("foreColor", {
    icon: `<input type="color" class="gjs-field" style="color: white;"/>`,
    event: "input",
    result: (rte, action) => rte.exec("foreColor", action.btn.firstChild.value),
    update: (rte, action) => {
      const value = rte.doc.queryCommandValue("foreColor");
      if (value && value !== "false") {
        action.btn.firstChild.value = rgbToHex(value);
      }
    },
  });

  // 添加左对齐工具
  rte.add("justifyLeft", {
    icon: `<button class="gjs-field" style="color: white;"><i class="fa fa-align-left"></i></button>`,
    event: "click",
    result: (rte) => rte.exec("justifyLeft"),
  });

  // 添加居中对齐工具
  rte.add("justifyCenter", {
    icon: `<button class="gjs-field" style="color: white;"><i class="fa fa-align-center"></i></button>`,
    event: "click",
    result: (rte) => rte.exec("justifyCenter"),
  });

  // 添加右对齐工具
  rte.add("justifyRight", {
    icon: `<button class="gjs-field" style="color: white;"><i class="fa fa-align-right"></i></button>`,
    event: "click",
    result: (rte) => rte.exec("justifyRight"),
  });

  // 添加插入表格工具
  rte.add("insertTable", {
    icon: `<button class="gjs-field" style="color: white;"><i class="fa fa-table"></i></button>`,
    event: "click",
    result: (rte, action) => {
      const rows = prompt("请输入行高");
      if (rows == null || rows == "") return;
      const cols = prompt("请输入列高");
      if (rows > 0 && cols > 0) {
        let table = '<table style="width:100%;">';
        for (let i = 0; i < rows; i++) {
          table += "<tr>";
          for (let j = 0; j < cols; j++) {
            table += '<td style="border: 1px solid #000;">&nbsp;</td>';
          }
          table += "</tr>";
        }
        table += "</table>";
        rte.insertHTML(table);
      }
    },
  });

  const { category, blocks, stylePrefix, flexGrid, rowHeight, addBasicStyle } =
    opts;
  const clsRow = `${stylePrefix}row`;
  const clsCell = `${stylePrefix}cell`;
  const styleRow = flexGrid
    ? `
    .${clsRow} {
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      flex-wrap: nowrap;
      padding: 10px;
    }
    @media (max-width: 768px) {
      .${clsRow} {
        flex-wrap: wrap;
      }
    }`
    : `
    .${clsRow} {
      display: table;
      padding: 10px;
      width: 100%;
    }
    @media (max-width: 768px) {
      .${stylePrefix}cell, .${stylePrefix}cell30, .${stylePrefix}cell70 {
        width: 100%;
        display: block;
      }
    }`;
  const styleClm = flexGrid
    ? `
    .${clsCell} {
      min-height: ${rowHeight}px;
      flex-grow: 1;
      flex-basis: 100%;
    }`
    : `
    .${clsCell} {
      width: 8%;
      display: table-cell;
      height: ${rowHeight}px;
    }`;
  const styleClm30 = `
  .${stylePrefix}cell30 {
    width: 30%;
  }`;
  const styleClm70 = `
  .${stylePrefix}cell70 {
    width: 70%;
  }`;

  const step = 0.2;
  const minDim = 1;
  const currentUnit = 1;
  const resizerBtm = {
    tl: 0,
    tc: 0,
    tr: 0,
    cl: 0,
    cr: 0,
    bl: 0,
    br: 0,
    minDim,
  };
  const resizerRight = {
    ...resizerBtm,
    cr: 1,
    bc: 0,
    currentUnit,
    minDim,
    step,
  };

  // Flex 元素不会对宽度样式变化做出反应，
  // 因此使用'flex-basis' 作为列上调整大小的 keyWidth
  if (flexGrid) {
    resizerRight.keyWidth = "flex-basis";
  }

  const rowAttr = {
    class: clsRow,
    "data-gjs-droppable": `.${clsCell}`,
    "data-gjs-resizable": resizerBtm,
    "data-gjs-name": "Row",
  };

  const colAttr = {
    class: clsCell,
    "data-gjs-draggable": `.${clsRow}`,
    "data-gjs-resizable": resizerRight,
    "data-gjs-name": "Cell",
  };

  if (flexGrid) {
    colAttr["data-gjs-unstylable"] = ["width"];
    colAttr["data-gjs-stylable-require"] = ["flex-basis"];
  }

  // 将行类和列类设为私有
  const privateCls = [`.${clsRow}`, `.${clsCell}`];
  editor.on(
    "selector:add",
    (selector) =>
      privateCls.indexOf(selector.getFullName()) >= 0 &&
      selector.set("private", 1)
  );

  const attrsToString = (attrs) => {
    const result = [];

    for (let key in attrs) {
      let value = attrs[key];
      // 以下代码中如果不进行判断的话，会默认在class类前添加'-'
      const toParse = value instanceof Array || value instanceof Object;
      value = toParse ? JSON.stringify(value) : value;
      result.push(`${key}=${toParse ? `'${value}'` : `'${value}'`}`);
    }

    return result.length ? ` ${result.join(" ")}` : "";
  };

  const toAdd = (name) => blocks.indexOf(name) >= 0;
  const attrsRow = attrsToString(rowAttr);
  const attrsCell = attrsToString(colAttr);
  const commonBlockProps = {
    category,
    select: true,
  };

  const updateAlignmentStyle = (model) => {
    const alignment = model.get("alignment");
    if (alignment) {
      const style = model.getStyle();
      style.display = "flex";
      style["justify-content"] = alignment;
      model.setStyle(style);
    }
  };

  editor.on("component:update:alignment", updateAlignmentStyle);


  const createType = (types) => {
    types.forEach((type) => {
      editor.Components.addType(type, {
        model: {
          defaults: {
            tagName: "div",
            attributes: {
              "data-gjs-type": type,
            },
            traits: [
              {
                type: "select",
                label: "排列",
                name: "alignment",
                options: [
                  { id: "flex-start", name: "居左" },
                  { id: "center", name: "居中" },
                  { id: "flex-end", name: "居右" },
                ],
                changeProp: 1,
              },
            ],
          },
        },
      });
    });
  };

  createType(["column1", "column2", "column3", "column3-7"]);

  toAdd("column1") &&
    bm.add("column1", {
      ...commonBlockProps,
      label: opts.labelColumn1,
      media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M2 20h20V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1Z"/>
      </svg>`,
      // traits
      content: `<div ${attrsRow}>
        <div ${attrsCell} data-gjs-type="column1"></div>
      </div>
      ${
        addBasicStyle
          ? `<style>
          ${styleRow}
          ${styleClm}
        </style>`
          : ""
      }`,
    });

  toAdd("column2") &&
    bm.add("column2", {
      ...commonBlockProps,
      label: opts.labelColumn2,
      media: `<svg viewBox="0 0 23 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M2 20h8V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM13 20h8V4h-8v16Zm-1 0V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1Z"/>
      </svg>`,
      content: `<div ${attrsRow}>
        <div ${attrsCell} data-gjs-type="column2"></div>
        <div ${attrsCell} data-gjs-type="column2"></div>
      </div>
      ${
        addBasicStyle
          ? `<style>
          ${styleRow}
          ${styleClm}
        </style>`
          : ""
      }`,
    });

  toAdd("column3") &&
    bm.add("column3", {
      ...commonBlockProps,
      label: opts.labelColumn3,
      media: `<svg viewBox="0 0 23 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M2 20h4V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM17 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1ZM9.5 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"/>
      </svg>`,
      content: `<div ${attrsRow}>
        <div ${attrsCell} data-gjs-type="column3"></div>
        <div ${attrsCell} data-gjs-type="column3"></div>
        <div ${attrsCell} data-gjs-type="column3"></div>
      </div>
      ${
        addBasicStyle
          ? `<style>
          ${styleRow}
          ${styleClm}
        </style>`
          : ""
      }`,
    });

  toAdd("column3-7") &&
    bm.add("column3-7", {
      ...commonBlockProps,
      label: opts.labelColumn37,
      media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M2 20h5V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM10 20h12V4H10v16Zm-1 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1Z"/>
      </svg>`,
      content: `<div ${attrsRow}>
        <div ${attrsCell} data-gjs-type="column3-7" style='${
        flexGrid ? "flex-basis" : "width"
      }: 30%;'></div>
        <div ${attrsCell} data-gjs-type="column3-7" style='${
        flexGrid ? "flex-basis" : "width"
      }: 70%;'></div>
      </div>
      ${
        addBasicStyle
          ? `<style>
          ${styleRow}
          ${styleClm}
          ${styleClm30}
          ${styleClm70}
        </style>`
          : ""
      }`,
    });

  toAdd("text") &&
    bm.add("text", {
      ...commonBlockProps,
      activate: true,
      label: opts.labelText,
      media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" />
      </svg>`,
      content: {
        type: "text",
        resizable: true,
        content: "在这插入你的文字",
        style: { padding: "10px" },
      },
    });

  toAdd("link") &&
    bm.add("link", {
      ...commonBlockProps,
      label: opts.labelLink,
      media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" />
      </svg>`,
      content: {
        type: "link",
        content: "Link",
        style: { color: "#d983a6" },
      },
    });

  toAdd("image") &&
    bm.add("image", {
      ...commonBlockProps,
      activate: true,
      label: opts.labelImage,
      media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M21,3H3C2,3 1,4 1,5V19A2,2 0 0,0 3,21H21C22,21 23,20 23,19V5C23,4 22,3 21,3M5,17L8.5,12.5L11,15.5L14.5,11L19,17H5Z" />
      </svg>`,
      content: {
        style: { color: "black" },
        type: "image",
      },
      // onClick: function (editor, sender) {
      //   // 替换点击事件的处理逻辑
      //   const modal = editor.Modal;
      //   modal.setTitle('Edit Image');
      //   modal.setContent(`<input type="file" id="file-input" accept="image/*">`);
      //   modal.open();

      //   // 监听文件选择事件
      //   const fileInput = document.getElementById('file-input');
      //   fileInput.addEventListener('change', async () => {
      //     const file = fileInput.files[0];
      //     if (file) {
      //       try {
      //         const formData = new FormData();
      //         formData.append('image', file);

      //         // 发起后端接口请求
      //         const response = await axios.post('http://localhost:8085/upload/toUpload', formData);

      //         // 更新图片组件的 src 属性
      //         editor.getSelected().addAttributes({ src: response.data.data });

      //         // 关闭模态框
      //         modal.close();
      //       } catch (error) {
      //         console.error('上传失败', error);
      //         // 处理上传失败的逻辑
      //       }
      //     }
      //   });
      // },
    });
  bm.add("button", {
    label: "Button",
    category: "Basic",
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
          <path fill="currentColor" d="M20 20.5C20 21.3 19.3 22 18.5 22H13C12.6 22 12.3 21.9 12 21.6L8 17.4L8.7 16.6C8.9 16.4 9.2 16.3 9.5 16.3H9.7L12 18V9C12 8.4 12.4 8 13 8S14 8.4 14 9V13.5L15.2 13.6L19.1 15.8C19.6 16 20 16.6 20 17.1V20.5M20 2H4C2.9 2 2 2.9 2 4V12C2 13.1 2.9 14 4 14H8V12H4V4H20V12H18V14H20C21.1 14 22 13.1 22 12V4C22 2.9 21.1 2 20 2Z" />
      </svg>`,
    content: `<button class="base-button">Button</button>
        <style>
          .base-button {
            position: relative;
            cursor: pointer;
            width: 130px;
            height: 40px;
            line-height: 40px;
            border: none;
            border-radius: 5px;
            color:#fff;
            text-align: center;
            z-index: 1;
            background: rgba(90, 52, 179, 1);
          }
            
            .base-button:hover {
                color: black;
              }
          .base-button:hover::before {
                transform: scaleX(1);
              }
          .base-button::before {
              content: "";
              position: absolute;
              z-index: -1;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              transform: scaleX(0);
              transform-origin: 50%;
              background-color: rgba(255, 255, 255, 1);
              border-radius: 5px;
              transition: transform .3s ease-out;
            }
        </style>`,
  });
  //   bm.add('video', {
  //     ...commonBlockProps,
  //     label: opts.labelVideo,
  //     media: `<svg viewBox="0 0 24 24">
  //       <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
  //     </svg>`,
  //     content: {
  //         type: 'video',
  //         src: 'https://www.i3vsoft.com/mp4/banner3.mp4',
  //         controls: true, // 添加控件属性
  //         style: {
  //             height: '350px',
  //             width: '615px',
  //         },
  //         // 可调整大小
  //         traits: [
  //             {
  //                 type: 'text',
  //                 label: 'Source (URL)',
  //                 name: 'src',
  //             },
  //             {
  //                 type: 'text',
  //                 label: 'Height',
  //                 name: 'height',
  //             },
  //             {
  //                 type: 'text',
  //                 label: 'Width',
  //                 name: 'width',
  //             },
  //         ],
  //         script: function() {
  //             const videoEl = this;
  //             if (videoEl.tagName === 'VIDEO') {
  //                 videoEl.controls = true;
  //                 videoEl.play();
  //             }
  //         },
  //     },
  // });
  bm.add("map", {
    // ...commonBlockProps,
    label: opts.labelMap,
    category: "Basic",
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3M10,5.47L14,6.87V18.53L10,17.13V5.47M5,6.46L8,5.45V17.15L5,18.31V6.46M19,17.54L16,18.55V6.86L19,5.7V17.54Z" />
      </svg>`,
    content: {
      type: "map",
      src: "https://map.baidu.com/@12602226,2671606,13z",
      style: { height: "350px" },
    },
  });
  bm.add("divider", {
    label: "Divider",
    category: "Basic",
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
          <path fill="currentColor" d="M21 18H2V20H21V18M19 10V14H4V10H19M20 8H3C2.45 8 2 8.45 2 9V15C2 15.55 2.45 16 3 16H20C20.55 16 21 15.55 21 15V9C21 8.45 20.55 8 20 8M21 4H2V6H21V4Z" />
      </svg>`,
    content: `
        <table style="width: 100%; margin-top: 10px; margin-bottom: 10px;">
          <tr>
            <td class="divider"></td>
          </tr>
        </table>
        <style>
          .divider {
            background-color: rgba(0, 0, 0, 0.1);
            height: 1px;
          }
        </style>
      `,
  });
  bm.add("quote", {
    label: "Quote",
    category: "Basic",
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
          <path fill="currentColor" d="M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z" />
      </svg>`,
    content:
      '<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</blockquote>',
  });
  const gridItem = `<table class="grid-item-card">
      <tr>
        <td class="grid-item-card-cell">
          <img class="grid-item-image" src="https://via.placeholder.com/250x150/78c5d6/fff/" alt="Image"/>
          <table class="grid-item-card-body">
            <tr>
              <td class="grid-item-card-content">
                <h1 class="card-title">Title here</h1>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>`;
  bm.add("grid-items", {
    label: "Grid Items",
    category: "Basic",
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
      <path fill="currentColor" d="M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3"/>
    </svg>`,
    content: `
      <table class="grid-item-row">
        <tr>
          <td class="grid-item-cell2-l">${gridItem}</td>
          <td class="grid-item-cell2-r">${gridItem}</td>
        </tr>
      </table>
    `,
  });
  const listItem = `<table class="list-item">
      <tr>
        <td class="list-item-cell">
          <table class="list-item-content">
            <tr class="list-item-row">
              <td class="list-cell-left">
                <img class="list-item-image" src="https://via.placeholder.com/150/78c5d6/fff" alt="Image"/>
              </td>
              <td class="list-cell-right">
                <h1 class="card-title">Title here</h1>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>`;
  bm.add("list-items", {
    label: "List Items",
    category: "Basic",
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
      <path fill="currentColor" d="M2 14H8V20H2M16 8H10V10H16M2 10H8V4H2M10 4V6H22V4M10 20H16V18H10M10 16H22V14H10"/>
    </svg>`,
    content: listItem + listItem,
  });

  editor.Blocks.add("iframe", {
    label: "iframe",
    media: `<svg style="width:30px;height:30px" viewBox="0 0 24 24">
        <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
    </svg>`,
    activate: true,
    draggable: true,
    select: true,
    category: "Basic",
    resizable: true,
    content: {
      type: "iframe",
      style: { height: "350px" },
      // content:
      //   '<div class="iframe-container" style="width:100%;height:100%"><iframe style="width:100%;height:100%" class="iframe" src="http://localhost:8080/#/Main/CommodityList"></iframe></div>',
    },
  });
};
